<template>
	<view class="wrap">
		<view class="main" v-if="hasLoad">
			<view class="user-data" :style="'background-image:url(' + cardData.home_top_img + ')'">
				<view class="b-chance">
					<view class="s-tit">兑换机会</view>
					<view class="s-num">{{cardCodeData.chance_left}}</view>
					<view class="s-unit">次</view>
				</view>
				<view class="b-action" @click="onJumpOrder">
					<view class="s-btn">兑换订单</view>
				</view>
				<view class="b-state">
					<view class="s-tit f-wait" v-if="cardData.state == 0">兑换未开始</view>
					<view class="s-tit f-ing" v-else-if="cardData.state == 1">兑换进行中</view>
					<view class="s-tit f-end" v-else-if="cardData.state == 2">兑换已结束</view>
				</view>
				<view class="b-intro" @click="onShowTips" v-if="cardData.content">兑换说明</view>
			</view>
			<view class="all-gifts">
				<view class="b-items" v-if="giftList.length > 0">
					<view class="b-item" v-for="(item, index) in giftList" :key="index" @click="onJumpGift(item.id)">
						<view class="b-left">
							<image :src="item.cover_url" mode="aspectFill"></image>
						</view>
						<view class="b-main">
							<view class="b-title too-long">{{item.name}}</view>
							<view class="b-center">
								<view class="b-fund">
									<view class="s-worth" v-if="item.worth > 0">价值 {{item.worth}}元</view>
								</view>
								<view class="b-fund">
									<view class="s-worth market-price" v-if="item.amount > 0">市场价 <span class="amount-through">{{item.amount}}</span>元</view>
								</view>
								<view class="b-action">
									<template v-if="item.state == 1">
										<view class="s-action" v-if="item.count_left > 0">兑换</view>
										<view class="s-action f-disable" v-else>已兑完</view>
									</template>
									<view class="s-action f-disable" v-else-if="item.state==2">已兑换</view>
								</view>
							</view>
							<view class="b-amount">
								<view class="s-left">库存 {{item.count_left}}</view>
								<!--<view class="s-gain">已兑 {{item.count_gain}}</view>-->
							</view>
						</view>
					</view>
				</view>
				<view class="b-empty" v-else>
					暂无奖品
				</view>
			</view>
		</view>
		<!-- 加载中 -->
		<load-more :loadingType="loadingType" :loadingText="loadingText" :top="300"></load-more>
		<com-tips :show="display.tips" title="兑换说明" :content="cardData.content" @bindClose="onCloseTips"></com-tips>
		<view class="navbar">
			<view class="b-action">
				<view class="s-home" @click="onHome">退出兑换</view>
			</view>
		</view>
		<!-- 在线客服 -->
		<view class="customer-service" @click="onCustomerService">
			<image src="/static/imgs/kf.png" mode="widthFix"></image>
			<text>联系客服</text>
		</view>
	</view>
</template>

<script>
	import {
		getWrapData,
		logout
	} from '@/service/api/card.js'
	import mixinsCommon from '@/mixins/common.js'
	import mixinsAuth from '../../mixins/cardAuth.js'
	import loadMore from '@/components/load-more/load-more.vue'
	export default {
		mixins: [mixinsCommon, mixinsAuth],
		data() {
			return {
				cardData: {},
				cardCodeData: {},
				giftList: [],
				display: {
					tips: false,
				},
				hasLoad: false,
				loadingType: 1,
				loadingText: ''
			}
		},
		onShow() {
			this.loadWrapData()
		},
		methods: {
			loadWrapData() {
				getWrapData().then(([err, res]) => {
					console.log('getWrapData', err, res)
					if (!err) {
						this.hasLoad = true
						this.loadingType = -1
						this.cardData = res.cardData
						this.cardCodeData = res.cardCodeData
						this.giftList = res.giftList
					} else {
						this.loadingType = 3
						this.loadingText = err.data.msg || '加载失败'
					}
				})
			},
			onJumpOrder() {
				uni.navigateTo({
					url: '/pages/card/order'
				})
			},
			onJumpGift(giftId) {
				uni.navigateTo({
					url: '/pages/card/detail?gift_id=' + giftId
				})
			},
			onShowTips() {
				this.display.tips = true
			},
			onCloseTips() {
				this.display.tips = false
			},
			onHome() {
				logout().then(([err, res]) => {
					console.log('logout', err, res)
					this.$store.commit('delCardKey')
					uni.reLaunch({
						url: '/pages/card/login?cid=' + (this.$store.getters.cardId || 0)
					})
				})
			},
			onCustomerService() {
				// 打开有赞客服链接
				const serviceUrl = 'https://shop93244668.youzan.com/v3/im/index?c=wsc&v=2&o=https%3A%2F%2Fshop93244668.youzan.com%2F&kdt_id=93052500&type=default&fromSource=%7B%22kdt_id%22%3A%2293052500%22%2C%22source%22%3A%22default%22%2C%22endpoint%22%3A%22h5%22%2C%22site_id%22%3A0%7D&reft=1734428093773&spm=f.91451403#/index'
				//const serviceUrl = 'https://work.weixin.qq.com/kfid/kfce412dbdd0a94f8f3'
				// #ifdef H5
				window.location.href = serviceUrl
				// #endif
				// #ifdef MP-WEIXIN
				uni.navigateTo({
					url: '/pages/webview/index?url=' + encodeURIComponent(serviceUrl)
				})
				// #endif
			}
		}
	}
</script>

<style lang="scss">
	page {
		padding-bottom: env(safe-area-inset-bottom);
		background: $pq-bg-color;
	}

	.wrap {
		padding-bottom: 100upx;
	}

	.user-data {
		padding: 160upx 40upx 30upx 40upx;
		position: relative;
		background: #fff;
		background-image: url('@/static/imgs/card_top_bg.jpg');
		background-repeat: no-repeat;
		background-size: cover;
		display: flex;
		flex-direction: column;
		align-items: center;

		.b-chance {
			margin-top: 50upx;
			display: flex;
			align-items: center;

			.s-tit {
				font-size: 28upx;
				color: #eee;
			}

			.s-num {
				margin: 0 20upx;
				font-size: 60upx;
				font-weight: bold;
				color: #FBC315;
			}

			.s-unit {
				font-size: 28upx;
				color: #eee;
			}

		}

		.b-action {
			margin-top: 30upx;
			border: 2upx solid #fff;
			color: #fff;
			font-size: 28upx;
			padding: 0 50upx;
			height: 60upx;
			line-height: 60upx;
			border-radius: 30upx;
		}

		.b-state {
			margin-top: 50upx;
			display: flex;
			align-items: center;

			.s-tit {
				color: #fff;
				font-size: 24upx;
				padding: 0 20upx;
				background: #FBC315;
				height: 60upx;
				line-height: 60upx;
				border-radius: 10upx;

				&.f-wait {
					background: #444c69;
				}

				&.f-ing {
					background: #FFC300;
				}

				&.f-end {
					background: #c4c4c4;
				}
			}
		}

		.b-intro {
			position: absolute;
			right: 40upx;
			bottom: 40upx;
			font-size: 28upx;
			color: #fff;
		}
	}

	.all-gifts {
		background: #fff;

		.b-empty {
			height: 100upx;
			line-height: 100upx;
			text-align: center;
			color: #999;
			font-size: 28upx;
		}

		.b-items {

			.b-item {
				padding: 30upx;
				border-bottom: 1upx solid #eee;
				display: flex;

				&:last-child {
					border-bottom: none;
				}

				.b-left {
					width: 160upx;
					height: 160upx;

					image {
						width: 160upx;
						height: 160upx;
					}
				}

				.b-main {
					margin-left: 30upx;
					flex: 1;
					display: flex;
					flex-direction: column;

					.b-title {
						font-size: 28upx;
						color: #333;
						width: 500upx;
					}

					.b-center {
						margin-top: 20upx;
						display: flex;
						justify-content: space-between;

						.b-fund {
							display: flex;
							align-items: baseline;

							.s-worth {
								font-size: 24upx;
								color: #999;

								&.market-price {
									color: #bbb;
									
									.amount-through {
										text-decoration: line-through;
									}
								}
							}
						}

						.b-action {
							.s-action {
								background: #DA5650;
								color: #fff;
								font-size: 24upx;
								padding: 0 30upx;
								border-radius: 30upx;
								height: 60upx;
								line-height: 60upx;

								&.f-disable {
									background: rgba(218, 86, 80, 0.8)
								}
							}
						}
					}

					.b-amount {
						margin-top: 10upx;
						display: flex;
						justify-content: space-between;

						.s-left {
							font-size: 24upx;
							color: #999;
						}

						.s-gain {
							font-size: 24upx;
							color: #999;
						}
					}
				}
			}
		}
	}

	.navbar {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 100upx;
		background: #fff;
		// border-top: 1upx solid #f6f6f6;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.b-action {
			flex: 1;

			.s-home {
				background: #DA5650;
				height: 100upx;
				padding: 0 60upx;
				line-height: 100upx;
				font-size: 30upx;
				color: #fff;
				letter-spacing: 4upx;
				text-align: center;
			}
		}
	}
	.customer-service {
		position: fixed;
		right: 30upx;
		bottom: 120upx;
		z-index: 99;
		text-align: center;
		
		image {
			width: 100upx;
			height: 100upx;
		}
		
		text {
			display: block;
			font-size: 24upx;
			color: #666;
			margin-top: 4upx;
		}
	}
</style>